<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录与注册</title>
    <link href="/api/assets/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container { margin-top: 30px; }
        .nav-tabs { margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="container">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab">登录</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab">注册</button>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="login" role="tabpanel">
                <h2>登录</h2>
                <form id="loginForm">
                    <div class="mb-3">
                        <label for="loginUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="loginUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="loginPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="loginPassword" required>
                    </div>
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
            <div class="tab-pane fade" id="register" role="tabpanel">
                <h2>注册</h2>
                <form id="registerForm">
                    <div class="mb-3">
                        <label for="registerUsername" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="registerUsername" required>
                    </div>
                    <div class="mb-3">
                        <label for="registerPassword" class="form-label">密码</label>
                        <input type="password" class="form-control" id="registerPassword" required>
                    </div>
                    <button type="submit" class="btn btn-primary">注册</button>
                </form>
            </div>
        </div>
    </div>

    <script src="/api/assets/js/bootstrap.bundle.min.js"></script>
    <script>
        // 登录逻辑
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;

            fetch('/api/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                if (data.code === 200) {
                    window.location.href = '/api/binding.html';
                }
            })
            .catch(() => {
                alert('登录失败，请稍后重试');
            });
        });

        // 注册逻辑
        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;

            fetch('/api/binding/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                if (data.code === 200) {
                    //开始登录逻辑
                    fetch('/api/auth/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({username, password})
                    })
                        .then(response => response.json())
                        .then(data => {
                            alert(data.message);
                            if (data.code === 200) {
                                window.location.href = '/api/binding.html';
                            }
                        })
                        .catch(() => {
                            alert('登录失败，请稍后重试');
                        });
                }
            })
            .catch(() => {
                alert('注册失败，请稍后重试');
            });
        });
    </script>
</body>
</html> 